import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import track, { enterPage } from 'utils/track';
import * as actions from '../actions/index';
import { Tab, Progress } from '@teamix/ui';
import { Section } from '@alife/devops-ui';
import utils from 'utils';
import LfsList from './lfsList/index';
import DeleteRecord from './deleteRecord/index';
import { getLfsInfo } from 'pages/index/pages/project/pages/projectSettings/actions';
import intl from '../../../../../../../../../locale';

const { pathResource } = window.FORCE;

class Root extends Component {
  constructor(props) {
    super(props);
    const activeKey = window.location.hash ? window.location.hash.slice(1) : 'lfs';
    this.state = {
      activeKey,
    };
  }

  componentDidMount() {
    const fullName = pathResource.fullName.split('/')[1]
      ? pathResource.fullName.split('/')[1].trim()
      : '';
    document.title = intl.get(
      {
        id: 'code-assets.settingsLfs.containers.root.LargeFileStorageFullnameCloud',
        defaultMessage: '大文件存储 · {fullName} · 云效 Codeup',
      },
      { fullName },
    );
    enterPage('Repo-Settings-LFS');
  }

  getProgressProps = (a, b) => {
    return {
      percent: a && (a / b) * 100 < 1 ? 1 : (a / b) * 100,
      color: (a / b) * 100 >= 90 ? '#e62412' : '#70b8ff',
      size: 'large',
      textRender: () => {
        return '';
      },
    };
  };

  render() {
    const { lfsInfo, lfsUnlimit } = this.props;
    const { activeKey } = this.state;
    const lfsProgressProps = lfsInfo.opened
      ? this.getProgressProps(Number(lfsInfo.used), Number(lfsInfo.total))
      : {};

    const size = utils.getSizeStr(Number(lfsInfo.used));
    const { length } = size;
    const number = size.substring(0, length - 1);
    const unit = size.substring(length - 1);

    return (
      <>
        <Section
          title={intl.get({
            id: 'code-assets.settingsLfs.containers.root.LargeFileStorage',
            defaultMessage: '大文件存储',
          })}
          description={intl.get({
            id: 'code-assets.settingsLfs.containers.root.ForLargeCapacityRepositoriesGit',
            defaultMessage:
              '针对容量较大的仓库，Git LFS 支持将大型文件（如图片、音视频或其他二进制文件）转储至 LFS 服务，释放仓库容量，同时提升 Git 仓库读写速度。',
          })}
        >
          <div className="setting-main lfs-setting-main">
            <div className="setting-main-right">
              {lfsInfo && (
                <div className="lfs-content">
                  {lfsUnlimit ? (
                    <span style={{ fontWeight: 'bold' }}>
                      已使用 {size ? number : '0 G'} {unit}
                    </span>
                  ) : (
                    <div className="lfs-content-size">
                      <div className="size">
                        {size ? (
                          <React.Fragment>
                            <span className="number">{number}</span> {unit}
                          </React.Fragment>
                        ) : (
                          0
                        )}{' '}
                        / {utils.getSizeStr(Number(lfsInfo.total))}
                      </div>
                      <div className="lfs-progress">
                        <Progress {...lfsProgressProps} />
                      </div>
                    </div>
                  )}
                  <div className="lfs-content-tab">
                    <Tab
                      animation={false}
                      activeKey={activeKey}
                      onChange={(key) => {
                        this.setState({
                          activeKey: key,
                        });

                        if (key === 'delete') {
                          track({
                            action: 'review_lfs_delete_history',
                            page: 'Repo-Settings-LFS',
                            type: '',
                            control: '',
                          });
                        }
                      }}
                    >
                      <Tab.Item
                        key="lfs"
                        title={intl.get({
                          id: 'code-assets.settingsLfs.containers.root.FileList',
                          defaultMessage: '文件列表',
                        })}
                      />
                      <Tab.Item
                        key="delete"
                        title={intl.get({
                          id: 'code-assets.settingsLfs.containers.root.DeleteARecord',
                          defaultMessage: '删除记录',
                        })}
                      />
                    </Tab>
                    {activeKey === 'lfs' ? (
                      <LfsList {...this.props} />
                    ) : (
                      <DeleteRecord {...this.props} />
                    )}
                  </div>
                </div>
              )}
            </div>
          </div>
        </Section>
      </>
    );
  }
}

export default connect(
  (state) => ({
    ...state.project.projectSettings.lfs,
    pageInfo: state.root.pageInfo,
    lfsInfo: state.project.projectSettings.root.lfsInfo,
    lfsUnlimit: state.project.projectSettings.root.lfsUnlimit,
  }),

  (dispatch) => bindActionCreators({ ...actions, getLfsInfo }, dispatch),
)(Root);
